<template>
  <div class="box">
    <!-- 顶部 -->
    <header>
      <van-nav-bar title="线上药房" left-arrow @click-left="onClickLeft">
        <template #right>
          <svg
            t="1734316255094"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="5319"
            width="70"
            height="70"
          >
            <path
              d="M512 42.666667a32 32 0 0 1 0 64C288.149333 106.666667 106.666667 288.149333 106.666667 512s181.482667 405.333333 405.333333 405.333333 405.333333-181.482667 405.333333-405.333333a32 32 0 0 1 64 0c0 259.2-210.133333 469.333333-469.333333 469.333333S42.666667 771.2 42.666667 512 252.8 42.666667 512 42.666667z m233.685333 119.466666l2.282667 2.069334 90.496 90.496a32 32 0 0 1 2.090667 42.986666l-2.090667 2.282667-90.496 90.496a32 32 0 0 1-47.338667-42.965333l2.069334-2.282667 35.882666-35.882667H661.333333a138.666667 138.666667 0 0 0-138.581333 133.696L522.666667 448v128a32 32 0 0 1-63.850667 3.072L458.666667 576v-128a202.666667 202.666667 0 0 1 196.906666-202.581333L661.333333 245.333333h77.248l-35.882666-35.882666a32 32 0 0 1-2.069334-42.965334l2.069334-2.282666a32 32 0 0 1 42.986666-2.090667z"
              fill="#111111"
              p-id="5320"
              data-spm-anchor-id="a313x.search_index.0.i1.551d3a81c7R6GJ"
            ></path>
          </svg>
        </template>
      </van-nav-bar>
      <div class="search">
        <div class="search-lef">
          <van-search
            v-model="search"
            show-action
            label="地址"
            placeholder="请输入搜索关键词"
            @search="onSearch"
          >
            <template #action>
              <div class="button" @click="onClickButton">搜索</div>
            </template>
          </van-search>
        </div>
        <div class="search-rig" @click="toCart">
          <van-icon name="cart-o" :badge="prices" size="80" />
        </div>
      </div>
    </header>
    <main>
      <!-- tab切换1 -->
      <van-sticky>
        <van-tabs v-model:active="active" @change="hanldeChange" class="tabs">
          <van-tab v-for="(item, index) in tablist" :key="index" :title="item"> </van-tab>
        </van-tabs>
      </van-sticky>

      <div class="mypay" v-for="(ite, ind) in paylist" :key="ind">
        <div class="img"><img :src="ite.image" alt="" /></div>
        <div class="text">
          <div class="text1">
            <div class="OTC">
              <span>{{ ite.tag }}</span>
            </div>
            <div class="name">
              <span>
                {{ ite.name }}
              </span>
            </div>
          </div>
          <div class="desc" @click="todetail(ite.shop_spu_id)">
            适应症：用于特别后悔的事情，如分手了，骂老板了，丢钱了等一系列你觉得后悔的事情,想要反悔的事情
          </div>
          <div class="gopay">
            <div class="price">
              <span>￥{{ ite.price }}</span>
            </div>
            <div class="pay" @click="joincart(ite)">
              <van-icon name="cart-o" color="#ffffff" size="60" class="icons" />
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import axios from "../../utils/index";
import "./index.css";
import { ref, onBeforeMount } from "vue";

const tablist = ref([
  "消化系统",
  "神经系统",
  "五官用药",
  "风湿骨痛",
  "抗病毒类",
  "肿瘤用药",
  "皮肤用药",
  "儿科用药",
  "清热解毒",
  "肝胆用药",
  "泌尿系统",
  "内分泌类",
  "滋补调养",
  "呼吸用药",
  "肠胃净化",
  "维矿物质",
  "精神心理",
  "抗菌消炎",
  "糖尿病类",
  "母婴用药",
]);

const pageCode = ref(0);
const pageSize = ref(10);
// 买药数据模块
const paylist = ref([]);
const detdata1 = ref({});
const detdata2 = ref({});
const detdata3 = ref({});
const imgs = ref([]);
const id = ref(0);
const getlist2 = async () => {
  const res = await axios.get(`/v1/mall/home/shop_spu/content_config/`, {
    params: { cursor: pageCode.value, page_size: pageSize.value },
  });
  paylist.value = res.data.data.content_list;
};
getlist2();
const hanldeChange = (index) => {
  console.log(index);
  pageCode.value = index;
  getlist2();
};

const router = useRouter();
const todetail = (id) => {
  console.log("id", id);

  router.push({ path: "/shopdetail", query: { id: id } });
};
const onClickLeft = () => {
  router.push({ path: "/home" });
};
const getDetail1 = async () => {
  console.log(id.value);

  await axios
    .get(`/v1/mall/shop_spu/specification_info/?shop_spu_id=${id.value}`)
    .then((res) => {
      console.log(res.data.data);
      detdata1.value = res.data.data;
      console.log(detdata1.value, 1);
    });
};
const getDetail2 = async () => {
  console.log(id.value);

  await axios
    .get(`/v1/mall/shop_spu/detail/base/?shop_spu_id=${id.value}`)
    .then((res) => {
      console.log(res.data.data);
      detdata2.value = res.data.data;
      console.log(detdata2.value, 2);
      imgs.value = detdata2.value.swiper_info.img_list;
      console.log(imgs.value);
    });
};
const getDetail3 = async () => {
  console.log(id.value);

  await axios
    .get(`/v1/mall/shop_spu/detail/tail/?shop_spu_id=${id.value}`)
    .then((res) => {
      console.log(res.data.data);
      detdata3.value = res.data.data;
      console.log(detdata3.value, 3);
    });
};

// 加入购物车
const joincart = (item) => {
  id.value = item.shop_spu_id;
  getDetail1();
  getDetail2();
  getDetail3();
  const cartlist = JSON.parse(localStorage.getItem("cartlist")) || [];
  const atlist = cartlist.find((v) => v.shop_spu_id == item.shop_spu_id);
  cartlist.forEach((item, index) => {});
  if (atlist) {
    cartlist.forEach((value, index) => {
      if (value.id == atlist.id) {
        value.num++;
        localStorage.setItem("cartlist", JSON.stringify(cartlist));
        return;
      }
    });
  } else {
    cartlist.unshift({
      id: item.shop_spu_id,
      num: 1,
      price: detdata2.value.goods_info.price,
      title: detdata2.value.goods_info.title,
      img: imgs.value[0],
      state: false,
    });
    localStorage.setItem("cartlist", JSON.stringify(cartlist));
    console.log(cartlist);
  }
  router.push("/cart");
};

// 徽标提示
const prices = ref(0);
prices.value = JSON.parse(localStorage.getItem("cartlist")).length
// 点击购物车跳转到购物车
const toCart = ()=>{
  router.push('/cart')
}
</script>
